<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>三栏布局</title>
		<style type="text/css">
			*{padding: 0;margin: 0;}
			/*.left{width: 100px;height: 300px;background: red;float:left;}
			.center{height: 600px;background: green;overflow: hidden;}
			.right{width: 100px;height: 500px;background: orangered;float:right;}*/
			.left{width: 100px;height: 300px;background: red;float:left;}
			.center{height: 600px;background: green;margin-left: 100px;margin-right: 100px;}
			.right{width: 100px;height: 500px;background: orangered;float:right;}
			
			/*.left{width: 100px;height: 300px;background: red;position: absolute;left: 0;top:0;}
			.center{height: 600px;background: green;margin-left: 100px;margin-right: 100px;}
			.right{width: 100px;height: 500px;background:skyblue;position: absolute;right: 0;top:0;}*/
		</style>
	</head>
	<body>
		<div class="left">1</div>
		<div class="right">3</div>
		<div class="center">2</div>
	</body>
</html>
